<template>
    <div>
<!--            <span class="demonstration">默认 click 触发子菜单</span>-->
<!--            <el-cascader-->
<!--                    v-model="value"-->
<!--                    :options="ruleForm"-->
<!--                    :props="optionProps"-->
<!--                    @change="handleChange">-->
<!--            </el-cascader>-->
        <el-select v-model="value" placeholder="请选择学院" style="height: 50px" @change="change()" clearable>
            <el-option
                    v-for="item in ruleForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name+'/'+item.id">
            </el-option>
        </el-select>
        <el-select v-model="major" placeholder="请选择专业" style="height: 50px" clearable>
            <el-option
                    v-for="item in MajorInfo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name+'/'+item.id">
            </el-option>
        </el-select>
        <el-form style="width: 60%" :model="GradeInfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学院" prop="college_id" >
<!--                <el-input v-model="value"  v-on:change="change()"></el-input>-->
                <el-input v-model="value"  @focus="change()" @input="change()"></el-input>
<!--                <el-input v-model="value" v-on:change="change()"></el-input>-->
            </el-form-item>
            <el-form-item label="专业" >
                <el-input v-model="major" readOnly></el-input>
            </el-form-item>
            <el-form-item label="id" prop="id">
                <el-input v-model="GradeInfo.id"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="GradeInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="name">
                <el-input v-model="GradeInfo.px"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<!--                <el-button @click="resetForm('ruleForm')">重置</el-button>-->
                <el-button @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>


</template>

<script>
    export default {
        data() {
            return {

                ruleForm: {
                    id:'12412',
                    name:'fff'
                },
                GradeInfo:{
                    id:'',
                    name:'',
                    px:'',
                    collegeId:'123',
                    college_name:'0',
                    majorId:'234',
                    major_name:''
                },
                major:[],
                MajorInfo: [{
                    id:'B1001',
                    name:'软件工程',
                },
                    {
                        id:'B1002',
                        name:'网络工程',
                    }
                ],
                value: [],
                rules: {
                    name: [
                        { required: true, message: '部门名称不能为空', trigger: 'blur' },],
                    id:[
                        { required: true, message: 'id不能为空', trigger: 'blur' },
                    ],
                }
            };
        },
        methods: {
            handleChange(value) {
                // console.log(value);
               // console.log(this.ruleForm)

            },
            back(){
                this.$router.push("/queryGrade")
            },

            findCollegeName(){
                const _this=this
                axios.get('http://localhost:8181/college/f2').then(function (resp1) {
                    _this.ruleForm = resp1.data
                })


            },
            change(){
                const _this=this
               // alert(_this.value.split('/')[1])
                axios.get('http://localhost:8181/college/getMajorInfoByCollegeId/'+ _this.value.split('/')[1]).then(function (resp) {
                    console.log(resp.data)
                    _this.MajorInfo=resp.data
                })
            },

            submitForm(formName) {
                const _this=this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.GradeInfo.collegeId=this.value.split('/')[1]
                        this.GradeInfo.college_name=this.value.split('/')[0]
                        this.GradeInfo.majorId=this.major.split('/')[1]
                        this.GradeInfo.major_name=this.major.split('/')[0]
                         console.log(this.MajorInfo)
                        axios.post('http://localhost:8181/college/saveGrade',this.GradeInfo).then(function(resp) {
                            if (resp.data=='success'){
                                _this.$alert('部门：'+_this.GradeInfo.name+'添加成功', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push("/queryCollege")
                                    }
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created(){

             this.findCollegeName()

        },
    }
</script>